<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2024-10-15 16:02:56
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2025-06-09 09:58:08
 * @Description: 
 * 
 * Copyright (c) 2024 by xiaoMing.Cao, All Rights Reserved. 
-->
<template>
  <div class="bottle">
    <div class="bottle-head">
      <el-form :inline="true" :model="data.form" class="demo-form-inline" size="default">
        <el-form-item label="动态类型">
          <el-select v-model="data.form.trendType" placeholder="请选择瓶子类型">
            <el-option label="全部" value="" />
            <el-option label="真实动态" value="real" />
            <el-option label="机器动态" value="machine" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="make-main">
      <div class="make-item" v-for="item in data.list">
        <div class="make-i-left">
          <!-- 头像 -->
          <div class="make-head-img">
            <img lazy-load class="img-i" :src="item.avatarUrl" mode="widthFix"></img>
          </div>
        </div>
        <div class="make-i-right">
          <div class="make-i-nick">
            <div class="i-nick-left">
              <span class="nick-name">{{ item.nickname }}</span>
              <span class="iconfont" style="margin-right: 10px;"
                :class="item.gender == 'male' ? 'icon-nan' : 'icon-nv'"></span>
              <el-tag type="success" v-if="item.status == 'pass'">审核通过</el-tag>
              <el-tag type="warning" v-if="item.status == 'pending'">待审核</el-tag>
              <el-tag type="primary" v-if="item.status == 'autoPass'">自动通过</el-tag>
              <el-tag type="danger" v-if="item.status == 'reject'">违规驳回</el-tag>
            </div>
            <div class="i-nick-right">
              <el-button @click.stop="deleTrend(item)">删除动态</el-button>
              <el-button type="warning"  v-if="item.status == 'autoPass'" @click="disalogClick(item._id)">重新驳回</el-button>
            </div>
          </div>
          <!-- <div class="make-i-add">{{ item.addressData?.province || '地球' }} {{ item.addressData?.city || '中国' }}</div> -->
          <div class="make-i-add">{{ item.addressData?.province || '地球 中国' }}</div>
          <div class="make-i-content">
            <span class="content-span" @click.stop="toDetails" id="contentText" decode>{{ item.content }}</span>
          </div>
          <div class="make-i-content-img">
            <div class="img-item">
              <div class="image-grid" :class="imgGridClass(imgitem)" v-for="(imgitem, index) in item.imagesUrl"
                :key="imgitem.url">
                <!-- <img lazy-load :src="imgitem" mode="cover" class="grid-img"></img> -->
                <el-image class="grid-img" :src="imgitem" :preview-src-list="item.imagesUrl" fit="cover" />
              </div>
            </div>
          </div>
          <div class="make-i-toppic" v-if="item?.topic">
            <div class="toppic-item" v-for="picItem in (item?.topic ?? '').split(',')" :key="picItem">
              <span class="iconfont icon-huati"></span>
              <span class="toppic-span">{{ picItem }}</span>
            </div>
          </div>
          <div class="make-i-time">
            <div class="time-left">
              {{ item.createdAt }}
            </div>
            <div class="time-right">
              <div class="t-linke" :class="{ 'current-like': item.isLike }" @click.stop="linkeClick(index)">
                <span class="iconfont" :class="item.isLike ? 'icon-aixin1' : 'icon-aixin'"></span>
                点赞数：{{ item.likeCount || 0 }}
              </div>
              <div class="t-linke" v-if="type !== 'details'" @click.stop="toDetails">
                <span class="iconfont icon-comment"></span>
                评论数：{{ item.commentCount || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination style="margin-top: 15px; background:#fff; padding: 10px;" :size="parament.pageSize"
      :page-size="parament.pageSize" @change="pageChange" background layout="prev, pager, next" :total="data.total" />
    <el-dialog v-model="centerDialogVisible" title="请选择驳回原因" width="500" center>
      <div>
        <el-select v-model="exanimeDataSelectValue" placeholder="请选择">
          <el-option v-for="item in exanimeData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogExamine">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { onMounted, ref, reactive, computed } from 'vue';
import { getTrendsList, deleteTrends, reviewTrend } from '@/api/role';
import { ElMessage, ElMessageBox } from 'element-plus'

const centerDialogVisible = ref(false);
const exanimeDataSelectValue = ref('');

const exanimeData = ref([
  {
    name: '低俗色情',
    id: 1
  },
  {
    name: '政治敏感',
    id: 2
  },
  {
    name: '违法行为',
    id: 3
  },
  {
    name: '广告欺诈',
    id: 4
  },
  {
    name: '恶意攻击谩骂',
    id: 5
  },
  {
    name: '未成年有害行为',
    id: 6
  },
  {
    name: '不尊重女性',
    id: 7
  },
  {
    name: '恶意诋毁',
    id: 8
  },
  {
    name: '刷水/广告',
    id: 9
  },
  {
    name: '感官不适',
    id: 10
  },
  {
    name: '内容违规',
    id: 11
  },
  {
    name: '含违规二维码',
    id: 12
  }
])

const dialogExamine = () => {
  centerDialogVisible.value = false
  submitParamet.rejectReason = exanimeDataSelectValue.value + '';
  submitParamet.status = 'reject';
  postTrend();
}


const postTrend = () => {
  reviewTrend(submitParamet).then(res => {
    if (res.code == 200) {
      // 移除这个已经审核的动态
      data.list = data.list.filter(item => item._id != submitParamet.id)
      ElMessage.success('审核成功');
    }
  })
}

const data = reactive({
  // 真实瓶子
  list: [],
  form: {
    trendType: ''
  },
  total: 0
});

const parament = reactive({
  pageSize: 30,
  pageIndex: 1
});


const submitParamet = reactive({
  id: '',
  status: '',
  rejectReason: ''
});

const disalogClick = (id) => {
  submitParamet.id = id;
  submitParamet.rejectReason = exanimeDataSelectValue.value + '';
  submitParamet.status = 'reject';
  centerDialogVisible.value = true
}
const getList = () => {
  getTrendsList(Object.assign(data.form, parament)).then(res => {
    if (res.code == 200) {
      data.list = res.data?.data ?? [];
      data.total = res.data?.total ?? 0;
    }
  });
};

/**
 * @description: 添加点赞数
 * @return {*}
 */
const linkeClick = () => {

}

/**
 * @description: 删除
 * @return {*}
 */
const deleTrend = (item) => {
  ElMessageBox.alert('确定删除该动态', '温馨提示', {
    confirmButtonText: '确定',
    callback: (action) => {
      if (action == 'confirm') {
        deleteTrends({ trendId: item._id }).then(res => {
          if (res.code == 200) {
            ElMessage.success('删除成功');
            getList();
          }
        })
      }
    }
  })
}

const submitForm = () => {
  getList();
};

const pageChange = item => {
  parament.pageIndex = item;
  getList();
};

const imgGridClass = (imagesUrl) => {
  const imgLength = imagesUrl?.length ?? 0;
  if (imgLength == 1) {
    return 'single-image';
  } else if (imgLength <= 2) {
    return 'two-images';
  } else if (imgLength <= 3) {
    return 'three-images';
  } else if (imgLength <= 9) {
    return 'nine-images';
  } else {
    return 'nine-images';
  }
};

const resetForm = () => {
  data.form = {
    trendType: ''
  };
  getList();
};
getList();
</script>
<style scoped lang="scss">
.bottle {
  padding: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .bottle-head,
  .bottle-mian {
    background-color: #fff;
    display: flex;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 15px;
    flex-direction: column;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-table__header {
  background-color: #d3e3fd;
}

.make-main {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.make-item {
  width: calc((100% - 20px) / 3);
  padding: 15px;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  background-color: #fff;

  .make-i-left {
    width: 30px;
    height: 30px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;

    .make-head-img,
    .img-i {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .make-i-right {
    flex: 1;
    display: flex;
    flex-direction: column;

    .make-i-nick {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .i-nick-left {
        display: flex;
        flex-direction: row;
        align-items: center;

        .nick-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }

        .iconfont {
          background: #ea5fab;
          color: #fff;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          font-size: 10px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
        }

        .icon-nan {
          background: #0396ff;
        }
      }

      .i-nick-right {
        font-size: 12px;
        color: #c1c1c1;

        .iconfont {
          font-size: 12px;
          color: red;
          cursor: pointer;
        }

        .icon-shanchu {
          font-size: 20px;
        }
      }
    }

    .make-i-add {
      font-size: 12px;
      color: #999;
    }

    .make-i-content {
      font-size: 16px;
      color: #333;
      margin-top: 10px;
      line-height: 26px;
    }

    .content-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
      white-space: normal;
    }

    .content-more {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 10px 0;
      color: #ea5fab;
    }

    .collapsed {
      -webkit-line-clamp: 5;
      /* 限制显示 5 行 */
    }

    .expanded {
      -webkit-line-clamp: unset;
      /* 取消行数限制 */
    }
  }

  .make-i-content-img {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 10px;

    .img-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      /* 图片之间的间距 */

      .grid-img {
        border-radius: 8px;
      }

      .single-image {
        width: 70%;
        /* 单张图片占满宽度 */
        max-height: 80px;
        /* 限制图片最大高度 */
        max-width: 100%;

        .grid-img {
          width: 100%;
          height: 80px;
        }
      }

      /* 2张图片的样式 */
      .two-images,
      .three-images {
        width: calc((100% - 15px) / 3);
        /* 2张图片各占50%的宽度，带5px的间距 */
        aspect-ratio: 1;

        /* 保持图片为正方形 */
        .grid-img {
          width: 100%;
          height: 100%;
        }
      }

      /* 9张图片的样式 (九宫格) */
      .nine-images {
        width: calc(100% / 5 - 10px);
        /* 3x3 九宫格布局 */
        aspect-ratio: 1;

        /* 保持正方形 */
        .grid-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .make-i-toppic {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    flex-wrap: wrap;

    .toppic-item {
      border: 1px solid #f0f0f0;
      border-radius: 18px;
      padding: 3px 9px;
      margin: 3px 6px 3px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;

      .iconfont {
        font-size: 12px;
        color: #ea5fab;
        margin-right: 5px;
      }

      .toppic-span {
        font-size: 12px;
        color: #666;
      }
    }
  }

  .make-i-time {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    color: #999;

    .time-right {
      display: flex;
      align-items: center;
      justify-content: center;

      .t-linke {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .iconfont {
        font-size: 20px;
        color: #999;
        margin-left: 15px;
        margin-right: 4px;
      }
    }

    .current-like {
      color: #ea5fab;

      .iconfont {
        color: #ea5fab;
      }
    }
  }
}

.c-zw {
  width: 100%;
  height: 10px;
  background-color: #f5f6f9;
}

.review_content {
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .review_num {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    padding: 18px 0;

    .num {
      font-size: 14px;
    }
  }

  .noData {
    text-align: center;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    padding-bottom: 50px;

    .noText {
      margin-top: -25px;
    }

    .noMore {
      width: 264px;
      // margin-bottom: 52rpx;
    }
  }
}
</style>
